/*
 * @Author: 'cuixifneg' '5387080+cuixifneg@user.noreply.gitee.com'
 * @Date: 2025-10-29 11:04:36
 * @LastEditors: 'cuixifneg' '5387080+cuixifneg@user.noreply.gitee.com'
 * @LastEditTime: 2025-10-29 11:36:18
 * @FilePath: \vue-edtior-fabric\vite.config.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import ViteTransfrom from 'vite-plugin-require-transform'
import viteCompression from 'vite-plugin-compression'
import { visualizer } from 'rollup-plugin-visualizer'
export default defineConfig({
    optimizeDeps: {
        include: [
            'fabric',
            'vue',
            'vue-router',
            'vuex',
            'element-plus',
            'axios',
            'lodash-es'
        ],
        exclude: [
            'fabric-history' // 如果这个库有问题可以排除
        ]
    },
    plugins: [
        vue(),
        ViteTransfrom(),
        visualizer({
            open: true, //注意这里要设置为true，否则无效
            filename: 'stats.html', //分析图生成的文件名
            gzipSize: true, // 收集 gzip 大小并将其显示
            brotliSize: true // 收集 brotli 大小并将其显示
        }),
        viteCompression({
            verbose: true, // 是否在控制台输出结果
            disable: false, // 默认不禁止压缩
            deleteOriginFile: false, // 是否删除原文件
            threshold: 10240, // 体积小于 threshold 字节的文件将被删除
            algorithm: 'gzip', // 使用 gzip 压缩
            ext: '.gz' // 生成的压缩包后缀
        })
    ],
    server: {
        host: '0.0.0.0',
        port: 8888
    },
    resolve: {
        alias: [
            {
                find: '@',
                replacement: path.resolve(__dirname, './src')
            }
        ]
    },
    base: '/',
    build: {
        cssCodeSplit: true, // 启用 CSS 代码分割，减少初始加载体积
        sourcemap: false, // 构建后是否生成 source map 文件。如果为 true，将会创建一个独立的 source map 文件
        target: 'esnext', // 设置最终构建的浏览器兼容目标。默认值是一个 Vite 特有的值——'modules'  还可设置为 'es2015' 'es2016'等
        minify: 'terser', // 'terser' 相对较慢，但大多数情况下构建后的文件体积更小。'esbuild' 最小化混淆更快但构建后的文件相对更大。
        chunkSizeWarningLimit: 1000, // 提高 chunk 大小警告限制
        rollupOptions: {
            input: {
                main: path.resolve(__dirname, 'index.html')
            },
            output: {
                assetFileNames: '[hash].[name].[ext]',
                manualChunks: {
                    // Fabric.js 单独打包
                    'fabric': ['fabric'],
                    // Vue 生态系统
                    'vue-vendor': ['vue', 'vue-router', 'vuex'],
                    // Element Plus UI 库
                    'element-plus': ['element-plus', '@element-plus/icons-vue'],
                    // 工具库
                    'utils': ['lodash-es', 'uuid', 'axios'],
                    // 录制回放相关
                    'rrweb': ['rrweb', 'rrweb-player'],
                    // 其他第三方库
                    'vendor': [
                        'buffer',
                        'colorpickers', 
                        'epic-spinners',
                        'fabric-history',
                        'file-saver',
                        'framework-utils',
                        'psd.js',
                        'tojson.js',
                        'vuedraggable',
                        '@vueuse/core',
                        '@scena/guides'
                    ]
                }
            }
        },
        terserOptions: {
            compress: {
                drop_console: true,
                drop_debugger: true
            }
        }
    }
})
